<template>
  <div>
    <a-list
      item-layout="horizontal"
      :data-source="teamMemberList"
      :loading="listLoading"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
            <a-dropdown
              placement="bottomRight"
              :trigger="['click']"
              :disabled="myRole === teamRole.Member && !item.isMe"
            >
              <span class="select">
                {{ item.role === teamRole.Owner ? '拥有者' : '成员' }}
                <DownOutlined
                  v-show="
                    (myRole === teamRole.Member && item.isMe) ||
                    myRole === teamRole.Owner
                  "
                />
              </span>
              <template #overlay>
                <a-menu>
                  <div v-show="!item.isMe && item.role === teamRole.Member">
                    <a-menu-item
                      key="0"
                      @click="teamAction(1, item.memberId, item.nickname)"
                    >
                      <span>团队移交给Ta</span>
                    </a-menu-item>
                  </div>
                  <div v-show="!item.isMe && item.role === teamRole.Member">
                    <a-menu-item
                      key="1"
                      @click="teamAction(2, item.memberId, item.nickname)"
                    >
                      <span style="color: rgb(255, 77, 79)">移除</span>
                    </a-menu-item>
                  </div>
                  <div v-show="item.isMe">
                    <a-menu-item
                      key="2"
                      @click="teamAction(3, item.memberId, item.nickname)"
                    >
                      <span>退出团队</span>
                    </a-menu-item>
                  </div>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
          <a-list-item-meta :description="item.phoneNum" :title="item.nickname">
            <template #avatar>
              <a-avatar size="large" :src="item.avatarUrl" />
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
    <a-modal
      v-model:open="confirmModalData.visible"
      :title="confirmModalData.title"
      :body-style="{
        padding: '24px 0',
      }"
      :mask-style="{ backgroundColor: 'rgba(255,255,255,0.7)' }"
      :maskClosable="false"
      centered
    >
      {{ confirmModalData.contentText }}
      <template #footer>
        <a-button key="back" @click="() => (confirmModalData.visible = false)">
          取消
        </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="confirmModalData.confirmLoading"
          @click="handleSure"
        >
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { useTeamStore } from '@/store';
import { onMounted, reactive, ref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { teamRole } from '@/utils/Const.ts';
import { message } from 'ant-design-vue';
import { router } from '@/router';

const teamStore = useTeamStore();
const {
  getTeamMemberList,
  transferTeam,
  removeTeamMember,
  quitTeam,
  removeCurrentTeamId,
} = teamStore;
const myRole = ref(-1);
const listLoading = ref(true);
const teamMemberList = reactive<Array<any>>([]);

onMounted(async () => {
  const res = await getTeamMemberList();
  teamMemberList.push(...res?.data.memberList);
  myRole.value = res?.data.myRole;
  listLoading.value = false;
});

const confirmModalData = reactive({
  visible: false,
  title: '',
  optionType: 0, // 操作类型：1 = 移交团队，2 = 移除团队，3 = 退出团队
  contentText: '',
  memberId: '',
  memberName: '',
  confirmLoading: false,
});

function teamAction(type: number, userId: string, nickName: string) {
  confirmModalData.visible = true;
  confirmModalData.optionType = type;
  confirmModalData.memberId = userId;
  confirmModalData.memberName = nickName;
  switch (confirmModalData.optionType) {
    case 1: {
      confirmModalData.title = '移交团队';
      confirmModalData.contentText = `是否将团队「${teamStore.teamName}」移交给「${nickName}」？移交后您将变为团队内成员！`;
      break;
    }
    case 2: {
      confirmModalData.title = '移除成员';
      confirmModalData.contentText = `是否将成员「${nickName}」移除「${teamStore.teamName}」团队？移除后该成员的团队文件将自动移交给团队拥有者「${teamStore.teamOwner}」`;
      break;
    }
    case 3: {
      confirmModalData.title = '退出团队';
      confirmModalData.contentText = `您确定退出「${teamStore.teamName}」团队？退出后您的团队文件将自动移交给团队拥有者「${teamStore.teamOwner}」`;
      break;
    }
  }
}

async function handleSure() {
  switch (confirmModalData.optionType) {
    // 团队移交
    case 1: {
      const res = await transferTeam(confirmModalData.memberId);
      if (res?.code === 0) {
        router.go(0);
        message.success('团队移交成功');
      }
      break;
    }
    // 成员移除
    case 2: {
      const res = await removeTeamMember(confirmModalData.memberId);
      console.log('成员移除', res);
      if (res?.code === 0) {
        router.go(0);
      }
      break;
    }
    // 退出团队
    case 3: {
      const res = await quitTeam();
      if (res?.code === 0) {
        removeCurrentTeamId();
        message.info('已退出团队，正为您自动跳转至工作台');
        await router.push({ name: 'workbench' });
      }
      break;
    }
  }
  confirmModalData.visible = false;
}
</script>

<style scoped lang="scss">
.select {
  color: rgba(2, 2, 2, 0.65);
  cursor: pointer;
}
</style>
